<template>
	<div class="comp_user_search">
		<el-autocomplete
			placeholder="请输入昵称或openid进行搜索"
			v-model="searchVal"
			:trigger-on-focus="val?true:false"
			:clearable="true"
			style="width:300px; fetch-suggestions: 500px;"
			:fetch-suggestions="funcSearchAsync"
			@select="funcChange">
			<template slot-scope="{ item }">
				<div class="user_info">
					<img :src="item.wxuser_headimgurl" v-if="item.wxuser_headimgurl"/>
					<div class="user_txt">
						<div>{{ item.wxuser_nickname }}</div>
						<div>{{ item.wxuser_true_name }}</div>
						<div>{{ item.wxuser_phone }}</div>
						<div>{{ item.wxuser_openid }}</div>
					</div>
				</div>
			</template>
			<el-button :loading="loading" slot="append" icon="el-icon-search"></el-button>
		</el-autocomplete>
		<el-button slot="append" icon="el-icon-circle-close" @click="funcClear"></el-button>
		<div class="user_info">
			<img :src="user.wxuser_headimgurl" v-if="user.wxuser_headimgurl"/>
			<div class="user_txt">
				<div>{{ user.wxuser_nickname }}</div>
				<div>{{ user.wxuser_true_name }}</div>
				<div>{{ user.wxuser_phone }}</div>
				<div>{{ user.wxuser_openid }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			val: {
				type: String,
				default: ''
			}
		},
		model: {
			prop: 'val',
			event: 'setVal'
		},
		data() {
			let page_data = {
				user: {
					wxuser_openid: '',
					wxuser_nickname: '',
					wxuser_headimgurl: '',
					wxuser_phone: '',
					wxuser_true_name: ''
				},
				list: [],
				searchVal: '',
				selectVal: '',
				loading: false
			}
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('UserSearch:mounted')
			//
			this.g_page.funcSetVue(this)
		},
		created() {
			console.log('UserSearch:created')
		},
		methods: {
			funcClear() {
				console.log('funcClear')
				this.user = {
					wxuser_openid: '',
					wxuser_nickname: '',
					wxuser_headimgurl: '',
					wxuser_phone: '',
					wxuser_true_name: ''
				}
				this.selectVal = ''
				this.$emit('setVal', '')
			},
			funcChange(e) {
				console.log(`funcChange`, e)
				this.user = {
					wxuser_openid: e.wxuser_openid,
					wxuser_nickname: e.wxuser_nickname,
					wxuser_headimgurl: e.wxuser_headimgurl,
					wxuser_phone: e.wxuser_phone,
					wxuser_true_name: e.wxuser_true_name
				}
				this.$emit('setVal', e.wxuser_openid)
			},
			funcSearchAsync(e, cb) {
				console.log(`funcSearchAsync`, e)
				console.log(`funcSearchAsync`, this.selectVal)
				if (e.length < 2 || e == this.selectVal) { //值相同不搜索
					cb([])
					return
				}
				this.selectVal = e
				//
				this.loading = true
				this.g_cc.func_axios({
					url: `${BASE_API}/xadmin/user/user__list`,
					loading: false,
					data: {
						'compKw': e
					},
					success: (res) => {
						this.loading = false
						//
						if (res.errcode == 0) {
							cb(res.list)
						} else {
							this.g_cc.func_alert(res.errmsg, 'error')
						}
					}
				})
			}
			////////////////////
		}
	}
</script>

<style>
	.el-autocomplete-suggestion li {
		padding-bottom: 15px;
	}

	.user_info {
		display: flex !important;
		align-items: center;
	}

	.user_info img {
		width: 32px;
	}

	.user_txt {
		font-size: 12px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user_txt div {
		line-height: 20px;
	}

	li .user_info {
		display: flex !important;
		align-items: center;
	}

	li .user_txt {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>
